<template>
	<div class="app-content">
		<!-- <seach-nav placeholder="请输入员工关键字搜索"
		@filterShow="filterShow" @search="searchKey" />-->
		<SeachNav @search="searchKey" :showFilter="false"></SeachNav>
		<div class="department_list_wrap">
			<div class="department_item" v-for="(item,index) in departmentList" :key="item.department_id" @click="jumpNext(item.department_id)">
				<!-- @opened="openAction" @closed="closeAction" -->

				<uni-swipe-action :ref="'swipe'+index" :is-opened="item.showAction" :options="options" @click="action" :itemId="item.department_id">
					<div class="list_box">
						<span>{{item.name}}</span>
						<view class="iconfont iconjiantou"></view>
					</div>
				</uni-swipe-action>
			</div>
		</div>
		<div class="list">
			<template v-if="!$util.isEmpty(list.data)">
				<staff-list :list="list.data" check="false" />
			</template>
			<app-wrapper-empty v-else title="暂无员工" :is-empty="$util.isEmpty(list.data)" />
		</div>

		<!-- <select-staff @affirm="affirm"
		get-container="body" v-model="isSelect" :back_department_id="back_department_id"/>-->

		<div class="option_bar">
			<div class="option_item" @click="addStaff">添加员工</div>

			<div class="option_item" @click="toAddDepartment">添加部门</div>
			<div class="option_item" @click="showBottomBar">批量操作</div>
		</div>

		<open-VIP :show.sync="showVipPop" />
	</div>
</template>

<script>
import { list } from '@/mixins'
import staffList from './components/staffList'
import AppWrapperEmpty from '@/components/App_wrapper_empty'
import { getStaffList, delDepartment } from '@/api/staffManage'
import { mapState, mapGetters } from 'vuex'
import openVIP from '@/pages/components/dialog/openVIP'
import SeachNav from '@/pages/components/SeachNav'
import uniSwipeAction from '@/components/uni-swipe-action'
// import { getBasicUser } from '@/utils/auth'

export default {
	name: 'StaffManage',
	mixins: [list],
	components: {
		uniSwipeAction,
		SeachNav,
		staffList,
		AppWrapperEmpty,
		openVIP
	},
	data() {
		return {
			showVipPop: false,
			isFilter: false,
			form: {
				sValue: ''
			},
			selIds: '',
			operate: '',
			isSelect: false,
			departmentList: [],
			department_id: 0,
			filterMaskData: [
				{
					title: '员工状态',
					list: [],
					key: 'status',
					hide: false
				}
			],
			back_department_id: null,
			show: false,
			option: {},
			options: [
				{
					text: '编辑',
					style: {
						backgroundColor: '#07c160'
					}
				},
				{
					text: '删除',
					style: {
						backgroundColor: '#f44'
					}
				}
			],
			actions: ['批量移动员工', '批量删除员工'],
			swipeIndex: null
		}
	},
	onLoad(option) {
		if (option.sValue) {
			this.form.sValue = option.sValue
		}
		if (option.department_id) {
			this.department_id = option.department_id
		}
	},
	onShow() {
		this.resetList()
		this.init()
	},
	// onShow() {

	// console.log(this.$refs['swipe' + this.swipeIndex], 'swipe 实例')
	// },
	onPullDownRefresh() {
		this.resetList()
		this.init().then(res => {
			uni.stopPullDownRefresh()
		})
	},

	onReachBottom() {
		if (this.list.finished) {
			uni.showToast({
				title: '没有更多了',
				icon: 'none'
			})
			return
		}
		if (this.list.loading) {
			return
		}
		this.init()
	},
	// watch: {
	// 	department_id(val) {
	// 		this.resetList()
	// 		this.init()
	// 	}
	// },
	computed: {
		...mapState({
			isVip: state => state.user.user.vip_level > 0
		})
	},
	methods: {
		init(cb) {
			return getStaffList({
				department_id: this.department_id,
				page: this.list.page,
				limit: this.list.limit,
				...this.form
			}).then(res => {
				this.completes(res)
				this.departmentList = res.data.department.map(item => ({ ...item, showAction: false }))
				this.back_department_id = res.data.back_department_id
				// console.log(this.$refs['swipe' + this.swipeIndex], 'swipe 实例')
				// if (this.swipeIndex != null) {
				// 	this.$nextTick(() => {
				// 		// this.$refs[`swipe${this.swipeIndex}`].close()
				// 	})
				// 	// this.switchStatus(this.swipeIndex, false)
				// }
				if (cb && typeof cb === 'function') {
					cb(res)
				}
			})
		},
		addStaff() {
			if (!this.isVip) {
				this.showVipPop = true
				return
			}
			uni.navigateTo({
				url: `/pages/admin/staffManage/addStaff?department_id=${this.back_department_id}`
			})
		},
		searchKey(val) {
			this.form.sValue = val
			this.resetList()
			this.init()
		},
		toAddDepartment() {
			uni.navigateTo({
				url: `/pages/admin/staffManage/addDepartment?department_id=${this.back_department_id}`
			})
		},
		showBottomBar() {
			uni.showActionSheet({
				itemList: this.actions,
				success: res => {
					// res.tapIndex
					const params = {
						filter: 'manage',
						isSelect: 'true',
						tips: '去添加员工',
						operate: res.tapIndex === 0 ? 'move' : 'del',
						back_department_id: this.department_id
					}

					uni.navigateTo({
						url: `/pages/admin/staffManage/selectStaff${this.commonJS.queryData(params)}`
					})
				}
			})
		},
		resetStatus() {
			this.departmentList = this.departmentList.map(item => ({
				...item,
				showAction: false
			}))
		},
		// openAction(index) {
		// 	this.swipeIndex = index
		// },
		// closeAction(index) {
		// 	this.swipeIndex = null
		// },
		// switchStatus(index, status) {
		// 	this.$set(this.departmentList, index, { ...this.departmentList[index], showAction: status })
		// },
		action(e) {
			if (e.index == 0) {
				this.editDepartment(e.itemId)
			} else {
				this.deleteDepartment(e.itemId)
			}
		},
		editDepartment(id) {
			const params = {
				department_id: this.back_department_id,
				id
			}
			uni.navigateTo({
				url: `/pages/admin/staffManage/addDepartment${this.commonJS.queryData(params)}`
			})
		},
		deleteDepartment(department_id) {
			let that = this
			uni.showModal({
				title: '提示',
				content: '确定删除该部门吗？',
				success: res => {
					if (res.confirm) {
						delDepartment({ department_id }).then(res => {
							that.resetList()
							that.init()
						})
						// .catch(() => {
						// 	this.switchStatus(index, false)
						// })
					}
					//  else if (res.cancel) {
					// 	this.switchStatus(index, false)
					// }
				}
				// ,
				// fail: () => {
				// 	this.switchStatus(index, false)
				// }
			})
		},
		jumpNext(id) {
			uni.navigateTo({
				url: `/pages/admin/staffManage/staffManage?department_id=${id}`
			})
		}
	}
}
</script>

<style scoped lang="scss">
	.app-content {
		padding-bottom: 110px;
	}
	.white {
		color: white;
	}
	.list_box {
		height: 90px;
		padding: 0 30px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
	}
	.department_list_wrap {
		.department_item {
			display: block;
			margin-top: 20px;
			span {
				font-size: 28px;
			}
		}
	}

	.filter_wrap {
		.filter_txt {
			font-size: 24px !important;
			color: rgba(102, 102, 102, 1) !important;
		}
	}
	.option_bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 100px;
		box-sizing: border-box;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px -3px 10px 0px rgba(0, 0, 0, 0.1);
		z-index: 999;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 25px 0;
		.option_item {
			display: block;
			flex: 1;
			height: 50px;
			line-height: 50px;
			text-align: center;
			font-size: 26px;
			color: rgba(255, 105, 0, 1);
			& + .option_item {
				border-left: 1px solid rgba(238, 238, 238, 1);
			}
		}
	}
</style>
